<template>
    <div class="temCounty">
        <text-info class="textInfo" :pageType="pageType"/>
        <div class="windCounty">
            <h3 class="title">
                <span style="float:left">各乡镇实况温度</span>
                <span style="float:left;color:#EDA17B;">高温</span>
                <span style="float:left">排名</span>
           </h3>
            <ul class="rank">
            <li v-for="(item,index) of rankes" :key="index" :style="{'background-image':'url(../../../../../static/images/actuallyMonitor/'+(index+1)+'.png)'}">
                <span v-show="index<3" style="font-size:2.2rem;display:block;margin:1.4rem 1rem 0;">{{item.value}}℃</span>
                <span v-show="index<3" style="color:#fff;display:block;margin-top:1rem;">{{item.name}}</span>
                <span v-show="index>2" style="color:#fff;display:block;margin:.8rem 0 .8rem 0">{{item.name}}</span>
                <span v-show="index>2" style="font-size:1.2rem;">{{item.value}}℃</span>
                <span v-show="pageType=='wind-city'&&index>2" style="font-size:.7rem;">{{item.grade}}</span>
            </li>
        </ul>
        </div>
        <squared-nine class="rankTemCity" :pageType="pageType"/>
    </div>
</template>

<script>
import textInfo from './branch/textInfo'
import countyBar from './branch/countyBar'
import squaredNine from './branch/squaredNine'
export default {
    props:['pageType'],// to textInfo
    components:{
        textInfo,
        countyBar,
        squaredNine,
    },
    data(){
        return{
            rankes:[
                {name:'泽雅镇',value:27},
                {name:'大门镇',value:26},
                {name:'桐浦镇',value:26},
                {name:'塘下镇',value:25},
                {name:'藤桥镇',value:24},
                {name:'三都镇',value:22},
                {name:'乾潭镇',value:22},
                {name:'大门镇',value:21},
                {name:'塘下镇',value:19},
            ]
        }
    },
    created(){
    }
}
</script>

<style lang="scss" scoped>
    .temCounty{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        .textInfo{
            width:100%;
            max-height:14rem;
        }
        .windCounty{
            margin:3rem 0;
            height:22rem;
            background-image: url('../../../../static/images/actuallyMonitor/bar.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .title{
                line-height:2.4rem;
                letter-spacing: .2rem;
                font-size:1.2rem;
                height:2.4rem;
                border:.1rem solid rgba(48, 138, 199, 0.5);
                box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
                width:100%;
                margin-bottom:1.5rem;
                text-align:left;
                padding-left:1rem;
                box-sizing: border-box;
            }
            .rank{
                flex:1;
                display:flex;
                flex-wrap: wrap;
                li{
                    width:32%;
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    margin:0 2% 2% 0;
                    text-align:center;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    &:nth-child(-n+3){
                        height:7rem;
                    }
                    &:nth-child(n+4){
                        height:4.3rem;
                    }
                }
            }
        }
        .countyBar{
            width:100%;
            margin:1.5rem 0;
            height:23rem;
        }
        .rankTemCity{
            flex:1;
        }
    }
</style>